﻿
@{
    Layout = "";
}
<style>
    .qg_emptybox {
        margin: 0 auto;
        text-align: center;
        width: 60%;
        padding-top: 15%;
    }

        .qg_emptybox img {
            width: 100%;
            margin: 0 auto;
        }
</style>
<div ng-controller="SpikeListCtrl">
    <!-- 优惠券类别切换 -->
    <div class="flayout_g_tabBox" ng-show="ResponseData.length>0">
        <ul>
            <li ng-repeat="activity in ResponseData" id="tabbox_li_{{activity.Id}}" ng-class="{ 'ready': activity.ActivityState == '未开始' && $index!=0 ,'': activity.ActivityState != '未开始' && $index!=0,'ready active_ready': activity.ActivityState == '未开始' && $index==0 ,'active': activity.ActivityState != '未开始' && $index==0 }" ng-click="ChangeSpikeTime($index,activity)">
                <p class="g_time">{{activity.SpikeTime}}</p>
                <span class="g_state" id="g_state_{{activity.Id}}" ng-switch="activity.ActivityState"><span ng-switch-when="进行中">已开抢</span><span ng-switch-when="未开始">即将开抢</span><span ng-switch-when="已结束">已结束</span> </span>
            </li>

        </ul>
    </div>
    <div class="clear"></div>
    <!--end 优惠券类别切换 -->
    <!-- 优惠券轮播图 -->
    <div>
        <carousel interval="myInterval">
            <slide ng-repeat="slide in slides" active="slide.active">
                <a href="{{slide.url}}"><img ng-src="{{slide.image}}" style="margin: auto;" alt="" /></a>
            </slide>
        </carousel>
    </div>
    <!--end 优惠券轮播图 -->
    <!-- 场次列表 -->
    <div class="flayout_g_main">
        <div ng-repeat="activity in ResponseData" id="main_div_{{activity.Id}}" ng-show="ResponseData.length>0 && CurrentIndex==$index" ng-class="{ 'flayout_g_eachTimeSlot': activity.ActivityState != '未开始' ,'flayout_g_eachTimeSlot flayout_g_eachTimeSlot_ready': activity.ActivityState == '未开始' }">
            <div class="flayout_g_countdown">
                <p id="begin_p_{{activity.Id}}" style="display:none;">
                    距离本场开始还有：<span class="flayout_g_countdownTime">
                        <span id="times_day_begin{{activity.Id}}">0</span>天

                        <span id="times_hour_begin{{activity.Id}}">0</span>时

                        <span id="times_minute_begin{{activity.Id}}">0</span>分

                        <span id="second_begin{{activity.Id}}">0</span>秒
                    </span>
                </p>
                <p id="end_p_{{activity.Id}}">
                    距离本场结束还有：<span class="flayout_g_countdownTime">
                        <span id="times_day{{activity.Id}}">0</span>天

                        <span id="times_hour{{activity.Id}}">0</span>时

                        <span id="times_minute{{activity.Id}}">0</span>分

                        <span id="second{{activity.Id}}">0</span>秒
                    </span>
                </p>
            </div>
            <div class="flayout_g_proBox" ng-repeat="spike in activity.SpikeProductList">

                <div class="flayout_g_proImg"><img ng-src="{{ImgHostUrl+spike.ProductImgUrl}}"></div>
                <div class="flayout_g_proInfo">
                    <p class="flayout_g_proName" ui-sref="shop.productdetail({sku:spike.ProductSku,activityId:activity.Id})">{{spike.ProductName}}</p>

                    <div class="flayout_g_proPrice">
                        <span class="span1">¥</span><span class="span2">{{spike.Price}}</span><label class="label">¥{{spike.MarketPrice}}</label>
                    </div>
                    <div class="flayout_g_proSold">已抢：{{spike.SpikeStock}}</div>
                    <a ui-sref="shop.productdetail({sku:spike.ProductSku,activityId:activity.Id})" href="javascript:void(0);" class="flayout_g_abtn" name="flayout_g_abtn_{{activity.Id}}" ng-switch="activity.ActivityState"><span ng-switch-when="进行中">马上抢</span><span ng-switch-when="未开始">即将开抢</span><span ng-switch-when="已结束">已结束</span></a>

                </div>
            </div>
        </div>

        <div class="flayout_g_eachTimeSlot" ng-show="ResponseData.length==0">
            <div class="qg_emptybox">
                <img src="/Content/images/qg_empty.png" alt="抢购为空">
            </div>
        </div>
    </div>
    <!--end 场次列表 -->
</div>
<script type="text/javascript">
    var time_end = 0;
    var time_begin = 0;
    var activityid = 0;
    App.controller('SpikeListCtrl', [
            '$scope', '$http', '$rootScope', '$state', '$filter', '$timeout',
        function ($scope, $http, $rootScope, $state, $filter, $timeout) {
            $scope.ResponseData = [];
            $scope.CurrentIndex = 0;
            //数据初始化
            $http.post("/Activity/GetSpikeList").then(function (response) {
                $scope.ResponseData = response.data.Result;
                $scope.CarouselList = response.data.CarouselList;
                //console.log($scope.ResponseData);
                if (!$scope.ResponseData) {

                    $scope.ResponseData = [];
                }

                // 设置轮播图图片间隔
                $scope.myInterval = 3000;
                // 轮播图数据初始化
                var slides = $scope.slides = [];
                // 添加轮播图源
                if ($scope.CarouselList.length > 0) {
                    angular.forEach($scope.CarouselList, function (imgurl) {
                        slides.push({ image: $rootScope.ImgHostUrl + imgurl.ImgUrl, url: imgurl.LinkUrl });
                    });
                }

                if ($scope.ResponseData.length > 0) {
                    $scope.ChangeSpikeTime(0, $scope.ResponseData[0]);
                }

                var liNum = $scope.ResponseData.length;
                var parameter = 70;
                $(".flayout_g_tabBox ul").css("width", liNum * parameter);

            });
            var tt = function () {
                $rootScope.WxShare($rootScope.pageTitle(), '优品三悦', location.href, $rootScope.LogoUrl);
            }

            setTimeout(tt, 1000)

            $scope.ChangeSpikeTime = function (index, activity) {
                $scope.CurrentIndex = index;
                $(".flayout_g_tabBox ul li").removeClass('active');
                $("#tabbox_li_" + activity.Id).addClass('active');
                activityid = activity.Id;
                debugger
                time_end = new Date(activity.SpikeEndTime.replace(/-/g, '/'));  // 设定活动结束结束时间
                time_end = time_end.getTime();
                time_begin = new Date(activity.SpikeBeginTime.replace(/-/g, '/'));  // 设定活动结束结束时间
                if (time_begin > new Date()) {
                    $("#begin_p_" + activity.Id).show();
                    $("#end_p_" + activity.Id).hide();
                } else {
                    $("#begin_p_" + activity.Id).hide();
                    $("#end_p_" + activity.Id).show();
                }
                time_begin = time_begin.getTime();
                //console.log(time_end);

                setTimeout("count_down_begin()", 1000);//设置每一秒调用一次倒计时函数
                setTimeout("count_down()", 1000);//设置每一秒调用一次倒计时函数
            }


            $timeout(function () {
                // 判断是否是即将开抢
                $(".flayout_g_tabBox ul li").each(function (e) {

                    $(this).click(function () {
                        if ($(this).hasClass('ready')) {
                            $(".flayout_g_tabBox ul li").removeClass('active');
                            $(".flayout_g_tabBox ul li").removeClass('ready_active');
                            $(this).addClass('ready_active');
                        } else {
                            $(".flayout_g_tabBox ul li").removeClass('active');
                            $(".flayout_g_tabBox ul li").removeClass('ready_active');
                            $(this).addClass('active');
                        }

                        $(".flayout_g_main .flayout_g_eachTimeSlot").hide();
                        $(".flayout_g_main .flayout_g_eachTimeSlot:eq(" + e + ")").show();
                    });

                });
            });

        }]);
</script>
<script>
    //$(".flayout_g_tabBox ul li").each(function (e) {

    //    $(this).click(function () {
    //        $(".flayout_g_tabBox ul li").removeClass('active');
    //        $(this).addClass('active');
    //        $(".flayout_g_main .flayout_g_eachTimeSlot").hide();
    //        $(".flayout_g_main .flayout_g_eachTimeSlot:eq(" + e + ")").show();
    //    });

    //});



    //定义倒计时函数
    function count_down() {
        //根据天，时，分，秒的ID找到相对应的元素
        var time_day = document.getElementById("times_day" + activityid);
        var time_hour = document.getElementById("times_hour" + activityid);
        var time_minute = document.getElementById("times_minute" + activityid);
        var time_second = document.getElementById("second" + activityid);

        var time_now = new Date();  // 获取当前时间
        time_now = time_now.getTime();
        var time_distance = time_end - time_now;  // 时间差：活动结束时间减去当前时间
        var int_day, int_hour, int_minute, int_second;
        if (time_distance >= 0) {
            // 相减的差数换算成天数
            int_day = Math.floor(time_distance / 86400000)
            time_distance -= int_day * 86400000;
            // 相减的差数换算成小时
            int_hour = Math.floor(time_distance / 3600000)
            time_distance -= int_hour * 3600000;
            // 相减的差数换算成分钟
            int_minute = Math.floor(time_distance / 60000)
            time_distance -= int_minute * 60000;
            // 相减的差数换算成秒数
            int_second = Math.floor(time_distance / 1000)
            // 判断小时小于10时，前面加0进行占位
            if (int_hour < 10)
                int_hour = "0" + int_hour;
            // 判断分钟小于10时，前面加0进行占位
            if (int_minute < 10)
                int_minute = "0" + int_minute;
            // 判断秒数小于10时，前面加0进行占位
            if (int_second < 10)
                int_second = "0" + int_second;
            // 显示倒计时效果
            time_day.innerHTML = int_day;
            time_hour.innerHTML = int_hour;
            time_minute.innerHTML = int_minute;
            time_second.innerHTML = int_second;
            setTimeout("count_down()", 1000);

        } else {

            //如果您想在活动结束后提示什么信息，就写在下边的单引号内

            //$("#times_container").html('对不起，活动结束!!');
            //$(".w_qgspDetl_a").addClass('f_time_out');
            $("a[name='flayout_g_abtn_" + activityid + "']").html("已结束");
            $("#g_state_" + activityid).html("已结束");

        }
    }




    //定义倒计时函数
    function count_down_begin() {
        //根据天，时，分，秒的ID找到相对应的元素
        var time_day = document.getElementById("times_day_begin" + activityid);
        var time_hour = document.getElementById("times_hour_begin" + activityid);
        var time_minute = document.getElementById("times_minute_begin" + activityid);
        var time_second = document.getElementById("second_begin" + activityid);

        var time_now = new Date();  // 获取当前时间
        time_now = time_now.getTime();
        var time_distance = time_begin - time_now;  // 时间差：活动结束时间减去当前时间
        var int_day, int_hour, int_minute, int_second;
        if (time_distance >= 0) {
            // 相减的差数换算成天数
            int_day = Math.floor(time_distance / 86400000)
            time_distance -= int_day * 86400000;
            // 相减的差数换算成小时
            int_hour = Math.floor(time_distance / 3600000)
            time_distance -= int_hour * 3600000;
            // 相减的差数换算成分钟
            int_minute = Math.floor(time_distance / 60000)
            time_distance -= int_minute * 60000;
            // 相减的差数换算成秒数
            int_second = Math.floor(time_distance / 1000)
            // 判断小时小于10时，前面加0进行占位
            if (int_hour < 10)
                int_hour = "0" + int_hour;
            // 判断分钟小于10时，前面加0进行占位
            if (int_minute < 10)
                int_minute = "0" + int_minute;
            // 判断秒数小于10时，前面加0进行占位
            if (int_second < 10)
                int_second = "0" + int_second;
            // 显示倒计时效果
            time_day.innerHTML = int_day;
            time_hour.innerHTML = int_hour;
            time_minute.innerHTML = int_minute;
            time_second.innerHTML = int_second;
            setTimeout("count_down_begin()", 1000);

        } else {

            //如果您想在活动结束后提示什么信息，就写在下边的单引号内

            $("#begin_p_" + activityid).hide();
            $("#end_p_" + activityid).show();
            $("#tabbox_li_" + activityid).removeClass("ready ready_active");
            $("#tabbox_li_" + activityid).addClass('active');
            $("#main_div_" + activityid).removeClass("flayout_g_eachTimeSlot_ready");
            $("a[name='flayout_g_abtn_" + activityid + "']").html("马上抢");
            $("#g_state_" + activityid).html("已开抢");

        }
    }
</script>
